<template>
  <div>
    <div class="explain">
      <h4 style="margin-left: 1%;">操作说明</h4>
      <p style="margin-left: 1%;">
        *
        该功能主要用于设置公司内部员工信息，可以对员工的操作权限，账号，密码等进行设置。
      </p>
    </div>
    <div class="top">
      <el-input
        style="margin-left: 1%;"
        class="seach"
        placeholder="请输入想要查询的内容"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button id="seac" type="primary" icon="el-icon-search" @click="moHuChaXun">搜索</el-button>
      <el-button
        type="primary"
        id="ad"
        icon="el-icon-circle-plus-outline"
        @click="dialogVisible = true"
        >添加</el-button
      >
    </div>
    <div style="overflow: hidden; margin-top: 1%">
      <el-table
        :data="tableData"
        id="tabb"
        border
        stripe
        v-loading="loading"
        style="width: 99%"
      >
        <el-table-column prop="id" label="序号" width="70"></el-table-column>
        <el-table-column
          prop="username"
          label="账户"
          width="110"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="124">
        </el-table-column>
        <el-table-column prop="rolename_name" label="角色" width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="电子邮箱"
          width="230"
        ></el-table-column>
        <el-table-column
          prop="project_name"
          label="所属项目"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="管理班级"
          width="360"
        ></el-table-column>
        <el-table-column
          prop="state"
          label="用户状态"
          width="120"
        ></el-table-column>
        <el-table-column
          style="text-align: center"
          prop="operation"
          label="操作"
          width="150"
        >
          <el-button @click="drawer = true" size="mini" type="primary"
            >编辑</el-button
          >
          <el-button size="mini" type="danger">删除</el-button>
        </el-table-column>
      </el-table>

      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账户" prop="number">
            <el-input v-model="ruleForm.number"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="角色名称" prop="role">
            <el-select v-model="ruleForm.role" placeholder="请选择角色">
              <el-option label="超级管理员" value="cjgly"></el-option>
              <el-option label="管理员" value="gly"></el-option>
              <el-option label="班主任" value="bzr"></el-option>
              <el-option label="教员" value="jy"></el-option>
              <el-option label="教官" value="jg"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="所属项目" prop="project_name">
            <el-select v-model="ruleForm.project" placeholder="请选择所属项目">
              <el-option label="山海关铁路技师学院" value="shg"></el-option>
              <el-option label="青龙职教中心" value="ql"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-transfer v-model="value" :data="data"></el-transfer>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script scoped>
export default {
  data() {
    const generateData = () => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      data: generateData(),
      value: [1, 4],
      input: "",
      // loading:true, loading加载
      dialogVisible: false,
      drawer: false,

      tableData: [],

      ruleForm: {
        number: "",
        name: "",
        role: "",
        email: "",
        project: "",
      },
      rules: {
        number: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
          { min: 3, max: 9, message: "长度在 3 到 9 个字符", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
        role: [{ required: true, message: "请选择用户角色", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        project: [
          { required: true, message: "请选择所属项目", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 添加用户（未完成）
          this.$http.get( `/api/gitCreateUser`,{
            number:this.ruleForm.number,
            name:this.ruleForm.name,
            role:this.ruleForm.role,
            email:this.ruleForm.email,
            project:this.ruleForm.project,
          }).then(()=>{
            this.aa()
          })

          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    aa() {
      this.$http.get("/api/getUser?limit=5&offset=0").then((res) => {
        console.log(res.data);
        if (res.data.code === 2000) {
          this.tableData = res.data.data;
        }
      });
    },
    // 搜索请求（模糊查询）
    moHuChaXun(){
      this.$http.get( `/api/getVague?vague=${this.input}`).then((res)=>{
        console.log(res.data);
        if(res.data.code === 2000){
          this.tableData = res.data.data
        }
      })
    }

  },
  created() {
    this.aa();
  },
};
</script>

<style scoped>
.cell {
  text-align: center;
}
.seach {
  width: 300px;
}
.top {
  /* margin-left: 1%; */
  margin-top: 15px;
  /* margin-bottom: 15px; */
}
.explain {
  border-radius: 15px;
  line-height: 30px;
  background-color: rgb(197, 230, 235);
  margin-top: 15px;
  margin-left: 4%;
}
#tabb {
  margin-left: 1%;
  border-radius: 15px;
}
#seac {
  margin-left: 20px;
}
#ad {
  float: right;
  margin-right: 4%;
}
</style>
